<template>
  <div class="base-seamless-scroll">
    <div class="scroll-con">
      <div class="base-scroll-item" :class="{scroll: isScroll}" ref="base-scroll-item" v-resize :style="{ animationDuration: duration + 's' }">
        <slot></slot>
      </div>
      <template v-if="isScroll">
        <div
          class="base-scroll-item"
          :style="{ animationDuration: duration + 's' }"
          v-for="(item, index) in 2"
          :key="index"
          :class="{scroll: isScroll}"
        >
          <slot></slot>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
// iui
export default {
  name: "BaseSeamlessScroll",
  props: {
    // 是否滚动
    isScroll: {
      type: Boolean,
      default: true,
    },
  },
  components: {},
  data() {
    return {
      // fui
      // 滚动copy是否展示
      scrollCopyShow: false,
      scrollItemHeight: null,
      duration: 10,
    };
  },
  computed: {},

  directives: {
    resize: {
      // 指令的名称
      bind(el, binding, vnode, oldVnode) {
        // el为绑定的元素，binding为绑定给指令的对象
        let that = vnode.context;
        that.computeDuration();
      },
      update(el, binding, vnode, oldVnode) {
        let that = vnode.context;
        that.computeDuration();
      },
    },
  },

  created() {},
  mounted() {},

  methods: {
    // hui
    /**
     * 计算时长
     * @param name 描述信息
     * @return {*}
     */
    computeDuration() {
      this.$nextTick(() => {
        let offsetHeight = this.$refs["base-scroll-item"].offsetHeight;
        this.duration = offsetHeight / 40;
      });
    },
  },
};
</script>

<style scoped lang="scss">
// jui

.base-seamless-scroll {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll-con {
  overflow: hidden;
  &:hover {
    .base-scroll-item {
      animation-play-state: paused;
      -webkit-animation-play-state: paused; /* Safari 和 Chrome */
    }
  }
}
.scroll {
  padding-top: 30px;
  animation: 10s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
  0% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
  100% {
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
  }
}

@-webkit-keyframes wordsLoop {
  0% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
  100% {
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
  }
}
</style>
